<template>
  <!-- 左边导航栏区域 -->
  <div class="menu-left">
    <div class="header" :style="{ background: theme.menuLeftBc }">
      <p
        :style="{ color: theme.textColor, width: collapse ? '0' : '230px' }"
        class="new"
      >
        {{ systemName }}
      </p>
    </div>

    <el-menu
      class="el-menu"
      :class="'el-menu-' + theme.theme"
      :collapse="collapse"
      :theme="theme.theme"
      :default-active="routerPath"
      :unique-opened="usersetting.uniqueOpened"
      :default-openeds="defaultOpenedsArray"
      :text-color="theme.textColor"
      :background-color="theme.menuLeftBc"
      :active-text-color="theme.activeColor"
    >
      <SubMenu :list="menuList" :collapse="collapse"></SubMenu>
    </el-menu>
  </div>
</template>

<script lang="ts">
import themesetting from "@/utils/setting";
import { reactive, toRefs, computed, watch } from "vue";
import { useAppStore } from "@/storePinia/index";
export default {
  name: "MenuLeft",
  setup() {
    const state: any = reactive({
      systemName: "仲易学后台管理系统", // 系统名称
      theme: {}, // 当前导航栏主题
      collapse: false, // 是否水平折叠收起菜单
      defaultOpenedsArray: ["1"], // 当前打开的sub-menu的数组
      usersetting: computed(() => useAppStore().setting),
      worktab: computed(() => useAppStore().worktab),
      routerPath: computed(() => useAppStore().worktab.current.path),
      menuList: computed(() => {
        const roleMenu = JSON.parse(
          window.sessionStorage.getItem("permis") || "{}"
        );
        const menuList = useAppStore().menuList;
        console.log(roleMenu);
        console.log(menuList);
        const permitId = [];
        // 获取当前可访问的菜单的ID列表
        for (let item of roleMenu) {
          permitId.push(item.id);
        }
        // 比对ID列表，获取出应有的菜单
        for (let item of menuList) {
          const children = [];
          for (let i = 0; i < item.children.length; i++) {
            const id = +item.children[i].id;
            if (permitId.indexOf(id) !== -1) {
              children.push(item.children[i]);
            }
          }
          item.children = [].concat(children);
          if (item.children.length === 0) {
            item.flag = true;
          }
        }
        const res = [];
        for (let i = 0; i < menuList.length; i++) {
          if (!menuList[i].flag) {
            res.push(menuList[i]);
          }
        }
        return res;
      }),
    });
    watch(state.usersetting, (now, prev) => {
      getTheme();
    });
    // 初始化用户设置 ||  获取最新设置
    const getTheme = () => {
      let that = JSON.parse(localStorage.getItem("usersetting") || "{}");
      if (Object.keys(that).length > 0) {
        state.theme = that.theme;
        let a = themesetting.themeList.filter((item) => {
          return item.theme === that.theme;
        });
        state.theme = a[0];
      } else {
        window.localStorage.setItem(
          "usersetting",
          JSON.stringify(state.usersetting)
        );
        getTheme();
      }
    };
    // 关闭导航栏
    const closeMenu = () => {
      state.collapse = true;
      state.collapseMobile = true;
      state.showMobileModel = false;
    };
    // 导航栏伸缩
    const visibleMenu = () => {
      state.collapse = !state.collapse;
    };
    getTheme();
    return {
      ...toRefs(state),
      getTheme,
      closeMenu,
      visibleMenu,
    };
  },
};
</script>

<style lang="scss">
.new {
  font-weight: 900;
  text-align: center;
}
.menu-left {
  // 黑色主题
  .el-menu-dark {
    background-color: #191a23;
    .el-menu-item {
      background-color: #191a23 !important;
    }
    // 选中颜色
    .el-menu-item.is-active {
      background: #2d8cf0 !important;
    }
    // 鼠标移入背景色
    .el-submenu__title:hover {
      background: #121319 !important;
    }
  }
  // 白色主题
  .el-menu-white {
    // box-shadow: 5px 5px 8px 0 red;
    // 选中颜色
    .el-menu-item.is-active {
      background: #f0faff !important;
      // 左侧线条
      &::before {
        content: "";
        width: 3px;
        height: 100%;
        position: absolute;
        left: 0;
        background: #3296fa;
      }
    }
    // 鼠标移入背景色
    .el-submenu__title:hover,
    .el-submenu .el-menu-item:hover {
      color: #3296fa !important;
      background: #f0faff !important;
    }
    // 鼠标移入图标颜色
    .el-submenu__title:hover i,
    .el-submenu .el-menu-item:hover i {
      color: #3296fa !important;
    }
  }
  // 折叠后宽度
  .el-menu--collapse {
    $menu-left-shrink-width: 70px;
    width: $menu-left-shrink-width;
  }
  // 左边距
  .el-submenu__title {
    padding-left: 25px !important;
  }
  // 设置文字与图标的距离
  .el-submenu__title span {
    margin-left: 10px;
  }
  .el-submenu .el-menu-item span {
    margin-left: 15px;
  }
  // 箭头加粗
  .el-submenu__icon-arrow {
    font-weight: bold;
  }
}
</style>

<style lang="scss" scoped>
.menu-left {
  height: 100vh;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  box-shadow: 5px 5px 8px 0 rgba(29, 35, 41, 0.05);

  .el-menu--collapse {
    >>> .el-submenu__title span,
    >>> .el-submenu__icon-arrow {
      display: none;
    }
  }

  .header {
    height: 45px;
    line-height: 45px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    overflow: hidden;

    p {
      color: #c3c3c3;
      font-size: 15px;
      margin-left: 10px;
      margin-top: 5px;
      overflow: hidden;
      transition: width 0.3s ease-in-out;
    }
  }

  .el-menu {
    border-right: 0;
    height: calc(100vh - 45px);
    box-sizing: border-box;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 0px !important;
    }
  }

  .el-menu:not(.el-menu--collapse) {
    $menu-left-open-width: 250px;
    width: $menu-left-open-width;
  }

  .menu-model {
    display: none;
  }
}
</style>
